const items = [
  {
    // 导航名称
    text: '前端',
    // 该导航下所有的可选项
    children: [
      {
        // 名称
        text: 'JS',
        // id，作为匹配选中状态的标识
        id: 1,
      },
      {
        text: 'HTML',
        id: 2,
      },
    ],
  },
  {
      // 导航名称
      text: '后端',
      // 该导航下所有的可选项
      children: [
        {
          // 名称
          text: 'PHP',
          // id，作为匹配选中状态的标识
          id: 3,
        },
        {
          text: 'Java',
          id: 4,
        },
      ],
    },
]

Page({
    data: {
      goods: [
          {id: 1, title: '商品1', price: 999, buy: 11, img_url: 'https://oss.shop.eduwork.cn/product/2020-0820-5f3e084e2b714.png'},
          {id: 2, title: '商品2', price: 999, buy: 11, img_url: 'https://oss.shop.eduwork.cn/product/2020-0820-5f3e084e2b714.png'},
          {id: 3, title: '商品3', price: 999, buy: 11, img_url: 'https://oss.shop.eduwork.cn/product/2020-0820-5f3e084e2b714.png'},
          {id: 4, title: '商品4', price: 999, buy: 11, img_url: 'https://oss.shop.eduwork.cn/product/2020-0820-5f3e084e2b714.png'},
      ],

      itemTitle: '分类',
      sortOptions: [
        { text: '默认', value: 'default' },
        { text: '销量', value: 'sales' },
        { text: '推荐', value: 'recommend' },
        { text: '价格', value: 'price' },
        { text: '评论', value: 'comments_count' },
      ],

      mainActiveIndex: 0,
      items,

      page: 1, // 分页
      keyword: '', // 关键词搜索
      sort: 'default', // 排序
      category_id: null, // 分类
    },

    onLoad() {
      // 请求数据
      this.getData()
    },
  
    /**
     * 获取数据的函数
     */
    getData() {
      const {page, keyword, sort, category_id} = this.data

      // 请求参数
      let params = {
        page, // 分页
        title: keyword, // 标题搜索
      }

      // 处理排序
      if(sort !== 'default') params[sort] = 1

      // 处理分类
      if(category_id) params.category_id = category_id

      console.log(params)

      // 发送请求获取数据
      // getGoods(params).then(res => {
      //   this.setData({
      //     goods: res.goods,
      //     items: JSON.parse(JSON.stringify(res.category).replace(/name/gi, 'text'))
      //   })
      // })
    },

    /**
     * 触底加载更多
     */
    onReachBottom() {
      this.setData({
        page: this.data.page + 1
      })
      this.getData()
    },
    
    /**
     * 设置输入的关键字
     */
    onChangeKeyword(e) {
      this.setData({
        keyword: e.detail
      })
    },

    /**
     * 按照关键字搜索商品
     */
    serarchKeyword() {
      // 必须输入关键字才能搜索
      if(!this.data.keyword) {
        wx.showToast({
          title: '请输入关键字',
          icon: 'none'
        })
        return
      }
      this.getData()
    },

    /**
     * 取消搜索关键字
     */
    clearSearch() {
      this.setData({keyword: ''})
      this.getData()
    },

    /**
     * 选择排序后触发的事件回调
     */
    selectSort(e) {
      this.setData({
        sort: e.detail
      })
      this.getData()
    },

    /**
     * 点击分类左侧的事件
     */
    onClickNav({ detail = {} }) {
      this.setData({
        mainActiveIndex: detail.index || 0,
      });
    },
    
    /**
     * 点击分类, 进行筛选
     */
    onClickCategory({ detail = {} }) {
      // 如果当前点击的分类和已经选择的分类是同一个, 那么设置为null
      // 否则就是设置成当前点击的这个分类
      const category_id = this.data.category_id === detail.id ? null : detail.id;

      // 设置当前的分类id 和显示的title
      this.setData({ category_id, itemTitle: detail.text });
      // 关闭下拉菜单
      this.selectComponent('#select-category').toggle();
      // 请求数据
      this.getData()
    },
  });
